<template>
    <button @click="is_show = true">打开弹框</button>
    <!--  弹框  -->

    <!--  to属性表示将代码片段传递到 body 标签下  -->
    <teleport to="body">
        <div v-if="is_show" class="modal">
            <p>我是弹框~</p>
            <button @click="is_show = false">关闭</button>
        </div>
    </teleport>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue"
export default defineComponent({
    name: "ModalButton",
    components: {},
    setup() {
        const is_show = ref(false)
        return {
            is_show,
        }
    },
})
</script>

<style scoped>
.modal {
    width: 200px;
    height: 200px;
    border: 1px solid palegreen;
    background-color: #bbb5b5;
}
</style>
